<script setup lang="ts">
import useAuth from '@/composition/useAuth'
import { useRouter } from 'vue-router'
const router = useRouter()
const { form, login } = useAuth()
const toLogin = async () => {
   await login()
   router.push({ name: 'admin.index' })
}
</script>

<template>
   <div>
      <main class="h-screen bg-[#fafafa] flex justify-center items-center p-4">
         <div
            class="w-[600px] bg-[#eff5fd] rounded-[25px] shadow-xl overflow-hidden -translate-y-10 sm:grid grid-cols-2">
            <div class="form p-6 text-lg bg-white">
               <p class="text-[#303133] font-black pb-5">Sign In</p>
               <div>
                  <XInput v-model="form.username" placeholder="请输入用户名"></XInput>
                  <XInput v-model="form.password" placeholder="请输入密码" />
                  <XButton @click="toLogin()">登录</XButton>
                  <div class="text-list">
                     <XLink>问题反馈</XLink>
                     <XLink>网站首页</XLink>
                     <XLink>会员登陆</XLink>
                     <XLink>问题反馈</XLink>
                  </div>
               </div>
            </div>
            <div class="img flex-col justify-center items-center p-6 overflow-hidden hidden sm:flex">
               <img class="w-[100px] h-[100px] rounded-full" src="/src/assets/img/xiaosong.jpg" alt="" />
               <h1 class="font-black text-[20px] mb-3 mt-2 text-[#303133] pb-3">XIAOSONG</h1>
               <h2 class="text-[#606266] mb-4">Vue脚手架</h2>
               <h2 class="text-[#909399] text-sm">使用Vite、Vue3、TS</h2>
               <h2 class="text-[#909399] text-sm mt-2">Pinia、TaildWindCSS、ElementUI</h2>
            </div>
         </div>
      </main>
   </div>
</template>
<style scoped lang="scss">
.text-list {
   @apply flex justify-center gap-2;
}
</style>
